<template>
  <div>
    <div class="button-wrapper">
      <i class="icon iconfont icon-jianhao1" v-show="food.count>0" @click="reduce()"></i>
      <span v-show="food.count>0">{{food.count}}</span>
      <i class="icon iconfont icon-iconfontxinzeng" @click="add($event)"></i>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default{
    props: {
      food: {
        type: Object
      }
    },
    mounted(){},
    methods: {
      add(event){
        if (!this.food.count) {
          Vue.set(this.food, 'count', 1)
        } else {
          this.food.count++
        }
        this.$emit('ball-click',event.target)
      },
      reduce(){
        this.food.count--
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '../../static/less/var.less';

  .button-wrapper {
    color: #0094FF;
    font-size: @base*20rem;
    i {
      font-size: @base*30rem;
    }
    span {
      color: @fc1;
      width:@base*50rem;
    }
  }
</style>
